/* Components CSS Document */
/*******************************************************************************

    Sections
*/
	@import "mini_basket"; 
	@import "social_panel"; 
 
/*
    2. Product Finder (.pf)
    3. My Shopping List (.msl)
    4. TrustPilot (.tp)
	6. Login & Registration Panel (.lr)
	7. Product Componenets                       
    8. Product Results Pagination Components  
    9. Parametric Filtration - Left Sidebar and components
    10. Misc Layout styles
    11. Share bar
    12. Tabbed area
    13. Brand Bar

/*************************************************************************************************************
2. Product Finder (.pf)
*************************************************************************************************************/

ul.topNav li.product_finder{float:right; margin-left:5px;}
	li.product_finder a{
		background:#999;
		.white;
		font-weight:bold;
		.rounded_bottom(5px);
	}

.pf_content{
	background:#999;
}
	.pf_results{background:#eee;}
	.pf_content ul.product_list{
		margin:.5em auto;
	}

	.pf_content ul.product_list li{margin:0; float:left;}
    
    .pf_content .product{}
		.pf_content .product ul{
			.display-inline-block; 
			/*width:220px; */
			margin:0;
			margin-right:10px; 
			padding:10px;
			border:2px solid transparent;
			.rounded(5px);
			background:@white;
			opacity:.8;
		}
		.pf_content .product ul:hover{
			border:2px solid @white; 
			opacity:1; 
			.box-shadow(0px, 0px, 5px, 0.5);
			.transition(all, 0.5s, ease-in);
		}
			.pf_content .product ul li{}
			.pf_content .product ul li a{text-decoration:none;}
			.pf_content .product_thumb{width:60px; float:left; padding:0; margin:0;}
			.pf_content .product_thumb img{width:75px; height:100%; height:auto;}
			.pf_content .prod_desc{}
			.pf_content .productname{font-size:.6em;}
			.pf_content .productdesc{font-size:.4em; display:none;}
			.pf_content .productprice{font-size:1em; font-weight:bold; color:@base;}
			.pf_content .productprice span{font-size:.5em; text-transform:uppercase;}
			.pf_content .productname,
			.pf_content .productdesc,
			.pf_content .productprice{width:130px; line-height:1.2em; padding:10px 0 0 10px !important; float:right;}
			 li a.add_to_basket{}
			 li a.add_msl{}

.pf_form_row{}
.pf_form{display:block; margin-bottom:0;}
	.pf_form input, .pf_form select, .pf_form submit{margin-bottom:0 !important; height:30px;}
	.pf_pet_type{}
	.pf_product_type{}
	.pf_brand{}
	
	a.pf_results_btn{
		.rounded(5px); 
		border:1px solid transparent; 
		height:30px; 
		background:@base;
		.box-shadow(0px, 0px, 5px, 0.5);
		color:#fff;
		font-weight:bold;
		padding:2px 10px;
		.featurefont;
		text-shadow: 0 0 2px #000;
		text-decoration:none;
	}			
	.pf_results_btn:after{
		.iconFont; 
		content:"\e020"; 
		padding-left:10px; 
		height:40px;
		line-height:40px;
	}

/*************************************************************************************************************
3. My Shopping List Panel (.msl)
*************************************************************************************************************/

.msl_panel{
    position:relative;
    background:#333;
}

#msl_panel{
    position: absolute;
    bottom:40px;
	width:300px;
    right:0px;
    background: #ffffff;
    padding:10px;
    z-index: 1000000;
    .roundcorners(5px, 5px, 0px, 5px);
    .box-shadow(0px, -6px, 6px, 0.5);
}
.msl_panel ul{display:table;}
    .msl_panel ul li{display:table-row !important; padding:10px;}
    .msl_panel ul ul{display:table-cell !important;}
        .msl_panel ul ul li{display:table-cell !important;}

.msl_panel .product{}
    .msl_panel .product ul{background:#eee; font-size:16px; }
        .msl_panel .product ul li{}
        .msl_panel .remove_product{width:20px !important;}
        .msl_panel .product_thumb{padding:0px;}
		.msl_panel .product_thumb a{padding:0px;}
		.msl_panel .prod_desc{width:220px; .display-inline-block;}
        .msl_panel h4.productname{.standardfont; line-height:1em; margin:0; padding:0; font-size:9px; color:#666 !important;}
        .msl_panel .productprice{.standardfont !important; vertical-align:bottom; font-size:1.2em; color:#000 !important;}
		.add_to{width:150px; vertical-align:bottom;}


/*************************************************************************************************************
4. TrustPilot (.tp)
*************************************************************************************************************/

ul.trustPilot_footer{}
ul.trustPilot_footer, 
.trustPilot_footer li{
    height:38px !important;
    line-height:38px;
    padding:0 !important;
    vertical-align:middle;
    border-spacing:0px;
}

.tp_bar{
    background:transparent url(../images/icons/trustpilot-01.png) center center no-repeat !important;
    display:block;
    min-width:280px;
    height:38px;
    line-height:38px;
    padding:0 15px 0 105px !important;
    text-align:right;
    color:#fff !important;
    margin-right:5px !important;

    &:hover{
        background-color:transparent !important;
    }
}
/*************************************************************************************************************
5. breadcrumbs
*************************************************************************************************************/

section#breadcrumbs{margin-top:60px; padding-left:130px; margin-bottom:1em;
    ul.breadcrumbs{
		li{
			.inlineLi;
			font-size:.8em;
			&:after{content:"/"; .iconFont;}
			&.here:after{
				content:" ";
				.display-inline-block;
				max-width:200px; 
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			a{margin-right:5px; color:@base; text-decoration:none;}
		}
	}
}

/*************************************************************************************************************
6. Login & Registration Panel (.lr)
*************************************************************************************************************/		

.lr_content{
	background:#f5f5f5;
	color:#ccc;
	
	input, textarea{
		width:100%;
	}
	input[type="checkbox"]{
		float:left; width:20px;
	}
}


/*************************************************************************************************************
7. Product Components                       
*************************************************************************************************************/

.prodIcon{
	 .display-inline-block;
	 -webkit-border-radius:2px;
	 -moz-border-radius:2px;
	 border-radius:2px;
	 
	 &.med{
		width: 40px;
	 	height: 40px;
	 	background-size: 40px;
	 }
	 
	 &.free{background:url(../images/icons/prod-stamp-icons_Free_Delivery.svg) center center no-repeat;}
	 &.twos{background:url(../images/icons/prod-stamp-icons_BuyIn2s.svg) center center no-repeat;}
	 &.threes{background:url(../images/icons/prod-stamp-icons_BuyIn3s.svg) center center no-repeat;}
	 &.hotpick{background:url(../images/icons/prod-stamp-icons_HotPick.svg) center center no-repeat;}
	 &.bulk{background:url(../images/icons/prod-stamp-icons_BulkItem.svg) center center no-repeat;}
}


.component.noml{margin-left: 0;}

.component.grid article, .component.grid_3 article, .component.grid_4 article{
    .display-inline-block;
}

.megamenu .product{
	margin-bottom:10px !important;
}

.product {
	line-height:1em;
	.marginTB;
	position:relative;
	overflow:hidden;
	display:block;

	h1 {
		.featurefont;
		font-size:.9em;
		line-height:1;
		margin:0;
		padding:0;
		&.prodName{
			color:#666666;
		}
	}
	a { 
		color:#006633;
		text-decoration:none;
	}
	.prodRating{color:#DDDDDD;}
    .prodRating .gold{color:#ffac00;}	
	.prodRating{
		font-size:1em;
		text-align:center;
		width:100%;
		margin: 0 auto;
	}
	.prodReviews, .writeReview {
		font-size:.7em;
		text-align:right;
	}
	.description{
		.display-inline-block;
	}
	.special_offer{
		.display-inline-block;
		.gradient (top, #F00, #8C0000);
		color:#fff;
		font-weight:bold;
		padding:5px 15px; 
		font-size:.9em;
		margin-top:1em;
		.featurefont;
		text-align:center;
		
	}
	.prodIcons{
		text-align:left;
		min-height:35px;
		.display-inline-block;
		float:left;
	}
	.prodOffer {
		.display-inline-block;
		.featurefont;
		text-align:right;
		min-height:40px;
		float:right;
		.prodPrice{	
			position:relative;	
			font-size:22px;
			color:@base;
			font-weight:600;	

			span.small{
				font-size:10px;
				color:#666666;
				position:absolute;
				top:-7px;
				line-height:10px;
			}
			&.RRP{
				color:#888888;
				font-size:14px;
				span{
					&.small{text-decoration:none !important;}
					&.strike{text-decoration:line-through !important;}
				}
				
			}
		}
	}
	.promoIcon{
		 position:absolute;
		 top:0;
		 left:0;
		 background-position: top left;
		 background-repeat:no-repeat;
		 
		 &.hot {
			 background-image:url(../images/icons/hot_imageCorner_promoIcon.svg);
		}
		 &.free{
			 background-image:url(../images/icons/Prod-Stamp-icons-sash_Free_Delivery.png);
			 background-image:url(../images/icons/Prod-Stamp-icons-sash_Free_Delivery.svg), none;
		}
		 &.twos{
			 background-image:url(../images/icons/Prod-Stamp-icons-sash_BuyIn2s.png);
			 background-image:url(../images/icons/Prod-Stamp-icons-sash_BuyIn2s.svg), none;
		}
		 &.threes{
			 background-image:url(../images/icons/Prod-Stamp-icons-sash_BuyIn3s.png);
			 background-image:url(../images/icons/Prod-Stamp-icons-sash_BuyIn3s.svg), none;
		}
		 &.hotpick{
			 background-image:url(../images/icons/Prod-Stamp-icons-sash_HotPick.png);
			 background-image:url(../images/icons/Prod-Stamp-icons-sash_HotPick.svg), none;
		}
		 &.bulk{
			 background-image:url(../images/icons/Prod-Stamp-icons-sash_BulkItem.png);
			 background-image:url(../images/icons/Prod-Stamp-icons-sash_BulkItem.svg), none;
		}
	}
		 
	&.short{
		.prodOffer{
            .display-inline-block; 
            font-size:.8em; 
            width:60px;
            padding-right:10px;
        }
		.promoIcon{width:20px; height:20px; background-size:20px;}
	}
	&.short{
		/*width: 220px;*/
		padding:0px;
		.prodImg{
			float:left;
		}
		.prodReviews{
			font-size:.55em;
		}
		.aggregateRating {
			margin-right:10px;
			float:right;
		}
		h1.prodName{
			.display-inline-block; 
			margin:0; 
			font-size:.6em; 
			width:115px;
		}
	}
	&.stamp {
		/*margin: 6px;*/
		border:1px solid #ccc;
		.prodImg {
			margin:0 auto;
			display:block;
		}
		.aggregateRating{
			margin:0 auto 10px;
			display:block;
			width:100%;
			padding:5px;
			border-bottom:1px solid #cccccc;
			text-align:center;
			font-size:1em;
			color:#ccc;
			line-height:.9em;
		}
		&:hover{
			.box-shadow(0px, 0px, 5px, 0.5);
		}
		.stampOverlay{
			display:block;
			position:absolute;
			bottom:0; left:0;
			background:rgba(0, 0, 0, 0.8);
			padding:10px;
			height:100%;
			width:100%;
			border:5px solid #fff;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
			filter: alpha(opacity=0); 
			-moz-opacity: 0; 
			-khtml-opacity: 0;
			opacity: 0;
			.transition(all, 0.5s, ease-in);
			overflow:hidden;
			text-align:center;
				
				.baseBtn{
					position:absolute;
					bottom:0;
					left:0;
					width:100%;
					padding:10px;
				}
				p{
					margin:5px 0;
					color:#ccc;
				}
				h1.prodName{
					color:#ccc;
					padding:0;
					height:auto;
				}
				.description{
					color:#ccc;
					height:30px;
				}
				.add_to_basket{
					color:#fff;
				}
				a.btn01{
					padding:5px 10px;
					width:100%;
				}
				.aggregateRating{
					border:none;
					color:#666;
					a{
						color:#fff;
					}
				}
			}
	}
	&.thumb{
		margin-top:.5em;
		border:1px solid #ccc;
		position:relative;
		padding:0px;
		background:#f5f5f5;
		.transition(all, 0.5s, ease-in);
		
		.promoIcon{
			width:40px; 
			height:40px; 
			background-size:40px;
		}
		
		&:hover{
			.transition(all, 0.5s, ease-in);
			.box-shadow(0px, 0px, 10px);
			background:#fff;
			footer{
				opacity:1;
				.transition(all, 0.5s, ease-in);
			}
		}
		.prodImg{
			float:left;
		}
		.prodReviews{
			font-size:.55em;
		}
		.aggregateRating {
			position:absolute;
			bottom:5px;
			left:15px;
			.prodRating{
				font-size:.5em;
				color:#fff;
			}
		}
		h1.prodName{
			.display-inline-block;
			height:25px;
			margin:7px 5px; 
			font-size:.8em; 
			width:120px;
		}
		.prodOffer{
			width:50px; 
			float:right;
			margin-top:7px;
			margin-right:5px;
			min-height:10px;
			.prodPrice{
				padding-top:7px;
			}
		}
		footer{
			opacity:.5;
			right:5px;
			text-align:right;
			.transition(all, 0.5s, ease-in);
			border:none;
			margin:0;
			padding:0;
			.prodIcons{
				margin-left:10px;
				.prodIcon{
					 width:30px; 
					 height:30px; 
					 background-size:30px;
				}
			}
			a.btn01{
				font-size:.8em;
				padding: 5px 20px 5px 10px;
				.display-inline-block;
			}
			a{margin-right:5px;}
		}
	}
	&.small{
		position:relative;
		width:120px;
		height:125px;
		background:#FFFFFF;
		h1.prodName{
			position:absolute;
			font-size:.8em; 
			bottom:10px; 
			color:@base;
			background:#fff;
			max-height:20px;
		}
		.promoIcon{width:40px; height:40px; background-size:40px;}
		.aggregateRating{
			font-size:.3em;
			.prodRating{font-size:.3em;}
		}
		.prodOffer{
			min-height:23px;
			text-align:center;
			float:none;
			.prodPrice{
				color:#fff;
			}
		}
		&.stamp{
			margin:10px auto;
			padding:0;
			&:hover{
				.no-shadow();
			}
			.prodImg{
				margin-top:5px;
			}
		}
		.stampOverlay{
			padding:10px !important;
			border:1px solid #fff;
			.no-shadow();
			.rounded(5px);
				.baseBtn{
					padding:0px;
					position:relative;
				}
			a.btn01{
				padding:5px;
				width:60px;
				height:20px;
				line-height:10px;
				margin:0 auto;
				&:after{line-height:15px;}
			}
		}
	}
	&.mini{
		h1.prodName {
           padding-left:10px;
			font-size:.8em; 
			height:40px;
			overflow:hidden;
        }
		.description{
			 font-size:.8em;
			 height:40px;
			 overflow:hidden;
		}
		.special_offer{
			margin:0;
			p{
				margin:0;
			}
		}
		.prodOffer {
			margin:10px 0 0; 
			width:100%; 
			padding:10px;
			.display-inline-block;
			
			position:relative;	
			font-size:22px;
			color:@base;
			font-weight:600;
			
			.icons{float:left;}
			.prodPrice{float:right;}
		}
		.promoIcon{width:60px; height:60px; background-size:60px;}
		.prodIcon{
			 width:30px; 
			 height:30px; 
			 background-size:30px;
		}
	}
	&.summary{
		/*width: 220px; */
		padding:10px; 
		background:#fff;
		.prodOffer{
			font-size:1.4em; 
			height:35px;
			line-height:35px;
		}
		
		.promoIcon{
			 width:80px; 
			 height:80px; 
			 background-size:80px;
		}
		
		h1.prodName{
			margin-bottom:.5em;
		}
		.special_offer{
			width:100%;
			
			p{
				color:#fff !important;
				margin:0;
			}
		}
		.stampOverlay{ 
			.description{height:80px; overflow:hidden;}
		}
		.prodIcons{margin-bottom:0; height:40px; overflow:hidden;}
		.prodIcon{
			 width:40px; 
			 height:40px; 
			 background-size:40px;
		}
	}
	&.detail{
		.marginTB;
		p,ul,ol{
			line-height:1.7em;
		}
		.whiteBox{
			&.mediaPanel{padding:0; text-align:center; height:380px; overflow:hidden;}
			.prodImg-thumbs{
				position:relative;
				padding:7px 0 15px;
				background:#eee;
				width:100%;
				height:78px;
				line-height:70px;
				.pg_paging{margin-top:5px;}
				li.pg_previous,li.pg_next{
					position:absolute;
					top:35px;
					display:block;
					a{
						display:block;
						.iconFont;
					}
				}
				li.pg_previous{
					left:10px;
				}
				li.pg_next{
					right:10px;
				}
				ul{
					.display-inline-block;
					width:250px;
					margin:0;
					padding:0;
					overflow:hidden;
					li {
						position:relative;
						padding:1px;
						&:after{
							.iconFont;
							position:absolute;
							bottom:4px;
							right:6px;
							font-size:1.2em;
							color:#666666;
						}
						&.img:after{content:"\e044";}
						&.video:after{content:"\e043";}
						img{
							opacity:.5;
							.transition (all, .5s, linear);
							border:1px solid #fff;
							&:hover{
								opacity:1;
								border:1px solid #666;							
								.transition (all, .5s, linear);
							}
						}
						&.active img{
							opacity:1;
							border:1px solid #ccc;
						}
					}
				}
			}
		}
		.prod_details{
			height:444px;
			padding-bottom:70px;
		}
		.prodInfo_window{
			height:165px;
		}
		.whiteBox{position:relative;}
		.special_offer{
			width:100%;
			margin:.5em 0;
			p{
				margin:0 !important;
				font-size:1.2em;
			}
		}
		.prodShare {
			.marginT;
			font-size:.7em;
			a{}
			.askQuestion:before,
			.shareBox:before {
				font-size:2em;
				float:left;
				margin-right:.3em;
				.iconFont();
			}
			.askQuestion:before{content: "\e015";}
			.shareBox:before{content: "\e00b";}
		}
		.promoIcon{width:100px; height:100px; background-size:100px;}
		.prodImg{margin:0 auto;}
		h1.prodName{
			.display-inline-block; 
			font-size:1.4em; 
			width:100%;
			height:50px;
			overflow:hidden;
		}
		.prodRating{
			font-size:1.2em;
			text-align:left;
			width:auto;
			margin: 0;
			.display-inline-block;
		}
		.prodReviews, .writeReview {
			font-size:.9em;
			text-align:right;
		}
		.description{
			margin-bottom:0;
			font-size:.9em;
		}
		.prodOffer{
			position:relative;			
			.display-inline-block;
			height:60px;
			width:100%;
			line-height:40px;
			border-top:1px solid #ccc !important;
			font-size:1.5em;
			padding:.5em;
			margin:.5em 0 0;
			.quantity{text-align:left; 
				label{font-size:22px; line-height:32px; margin-right: 20px;}
			}
			.prodPrice{
				text-align:right; 
				/*font-size:1.5em;*/
				font-size:35px;
				span{top:0;}
				&.RRP{
					font-size:14px; padding-right:20px;
					span{top:-5px;}	
				}
			}
		}
		.prodIcons{
			position:relative;
			margin-top:7.5px;
			.prodIcon{
				 width:60px; 
				 height:60px; 
				 background-size:60px;
			}
		}
		footer.cta{
			position:absolute;
			bottom:0;
			left:0;
			width:100%;
			background:#f5f5f5;
			height:75px;
			line-height:65px;
			border-top:1px solid #ccc;
			text-align:right;
			padding:0 .5em;
			margin-bottom:0;
			
			.btn01{
				.display-inline-block;
				position:relative;
				height:50px;
				padding-right:2em !important;
				margin-left:.5em;
				font-size:1.7em;
				span{
					position:absolute;
					top:5px;
					font-size:.8em;
					line-height:1em;
				}
				&.add_to_msl{
				  	width:130px;
				 	span{color:#999;}
				}
				&.add_to_basket{
					min-width:180px; 
					font-size:2em;
					opacity:1;
					span{
						top:15px;
						opacity:.8;
					} 
					&:hover{
						.box-shadow (0px, 0px, 5px, 1);
						span{opacity:1;}
					}
				}
				&:after{
					top:10px;
					right:10px;
				}
			}
		}
	}
}

.product.detail.matrix{
	line-height: 1.7em;
	font-size:12px;
	margin-bottom:0;
	
	h1.prodName{
		font-size:1.4em;
		height:auto;
	}
	
	select{
		width:auto !important;
	}
	.prodOffer{
		padding:.5em 0;
	}
	
	footer.cta{
		position:relative;
		width:100%;
		border:1px solid #ccc;
		text-align:right;
		padding:10px;
		margin-bottom:0;
		p{margin-top:0; margin-bottom:0;}
	}
}

.product:hover .stampOverlay{
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100); 
	-moz-opacity: 1; 
	-khtml-opacity: 1;
	opacity: 1;
	.transition(all, 0.5s, ease-in);
}

.msl_panel .product{
	margin-top:.5em;
	position:relative;
	padding:0px;
	
	.remove_product{
		float:left;
	}
		
	&:hover{
		.transition-string(none);
		.no-shadow;
		background:#fff;
		footer{
			opacity:1;
			.transition-string(none);
		}
	}
	.prodImg{
		float:left;
		position:relative;
	}
	.aggregateRating {
		position:absolute;
		bottom:5px;
		left:5px;
		.prodRating{
			font-size:15px;
			color:#fff;
		}
	}
	h1.prodName{
		.display-inline-block;
		margin:7px 5px; 
		font-size:14px;
		width:90px; 
	}
	.prodOffer{
		width:50px; 
		float:right;
		margin-top:7px;
		margin-right:5px;
		min-height:10px;
		.prodPrice{
			padding-top:7px;
			font-size:16px;
		}
	}
	footer{
		opacity:.5;
		right:5px;
		text-align:right;
		.transition-string(none);
		border:none;
		margin:0;
		padding:0;
		.prodIcons{
			margin-left:10px;
		}
		.btn01{
			font-size:14px;
			padding: 10px 30px 10px 10px;
			.transition-string(none);
		}
		a{margin-right:5px;}
	}

}

.whiteBox{
	background:#fff; 
	border:1px solid #ccc; 
	&.nframe{border:none;}
}
.whiteBox, .gray_box, transBox{
	padding:10px;
	
	&.nopadding{
		padding:0px !important;
		header {
			padding:10px;
		}
		.span3{
			margin:0;
			margin-left:11px;
			
			.stamp{
				margin-bottom:10px;
			}
		}
	}
	form{margin:0;}
	header {
		border-bottom: 4px solid #eee;
		margin: .3em 0 1em;
		padding: 0 0 .3em;

		h3 {
			display:inline;
			margin: .3em 0;
			padding: 0 0 .3em;
		}
	
		aside.options {
		float:right;
		font-size:12px;
			ul {.inlineLi;}
			li {.inlineLi;}
		}
	}
	h3 {
		font-size: 1em;
		.featurefont;
		text-transform: uppercase;
		line-height: 1em;
		margin: .3em 0 .2em;
		padding: 0;
		color:@base;
	}
	p{
		margin:0.5em 0 1.5em;
		&:last{margin-bottom:0;}
	}
	footer {
		border-top: 4px solid #eee;
		margin: 1em 0 .3em;
		padding: .3em 0 0;
		aside.options {
		float:right;
		font-size:12px;
			ul {.inlineLi;}
			li {.inlineLi;}
		}
	}
}
.component.grid_3{ 
	.product.stamp,
	.brand.stamp,
	>article,
	>div{
		/*margin:.5em .85em .5em 0;*/
		&:nth-child(3n+1){
			margin-right:0;
			margin-left:0;
		}
	}
}
.component.grid_4{ 
	.product.stamp,
	.brand.stamp,
	>div{
		/*margin:.5em 12px .5em 0;*/
		&:nth-child(4n+1){
			margin-right:0;
			margin-left:0;
		}
		
	}
}

.component.noml .product.stamp{margin:0;}
.marTB{.marginTB;}
.marB{margin-bottom:10px;}


/*************************************************************************************************************
8. Product Grids/List Styles  
*************************************************************************************************************/		

#product-array{
    margin:.5em 0;
    padding:0;
}

article.product .list{display:none;}

#product-array.grid .component.grid_4{
	>div{
		.description{height:60px;}
	}
}


#product-array.grid article.product{
	vertical-align:top;
	min-height:325px;
	padding-bottom:80px;
	a{}
	.promoIcon{}
	.prodImg{
		&.med{width:100%; height:auto;}
	}
	.description{
		font-size:12px; 
		height:50px;
	}
	.aggregateRating{}
	.prodRating{}
	.prodReviews{}
	h1.prodName{height:60px;}
	.prodDeliveryIcon{}
	.prodPrice{}
	
	.grid_base{
		width:100%;
		position:absolute;
		bottom:0;
		left:0;
		
		.prodIcons{
			margin-left:10px;
			margin-bottom:10px;
		}
		
		.prodOffer{
			font-size:1.4em;
			margin-right:10px;
		}
		.special_offer{
			margin-top:0;
		}
	}
}

#product-array.list div.span3,
#product-array.list div.span4,
#product-array.list article.product{
	margin-left:0;
	width:100%;
	a{}
	.promoIcon{}
	.prodImg{
		float:left;
		margin-right:2em;
		width:150px;
		height:150px;
	}
	.aggregateRating{
		float:right;
		text-align:right;
		margin:0;
		width:200px;
        padding:5px;
		font-size:1em;
		color:#ccc;
		line-height:1em;
		border:none;
	}
	.prodRating{
		font-size:1.5em;
        text-align:right;
		width:100%;
	}
	.prodReviews{}
	h1.prodName{
		padding:0;
		margin:0;
		margin-right:200px;
	}
	.description{
		font-size:.8em; 
		margin-right:200px;
	}
	.special_offer{
		width:auto;
	}
	.list{display:block;}
	.prodIcons{
		position:absolute;
		margin:10px;
		bottom:0;
		left:185px;
	}
	.prodOffer{
		padding:0 1em 1em;
		.prodPrice{}
	}
	.stampOverlay{display:none;}
	footer.list{
		border:none;
		clear:right;
		float:right;
		margin:0;
		p a{
			margin-left:.5em;
			width:auto;
			height:40px;
			line-height:35px;
			font-size:1.2em;
			&.btn01{
				padding-left:1em !important;
				padding-right:2.5em !important;
				&:after{
					top:10px;
					margin-right:.5em;
				}
			}
			&.add_to_basket{
				min-width:140px !important;
			}
		}
	}
}

/*************************************************************************************************************
9. Product Results Pagination Components                                          
*************************************************************************************************************/

.pagination_results, .view_bar{
    height:36px;
    line-height:36px;
    padding:0 .5em;
	font-size:.8em;
	ul{
		margin:0 !important;
		li{
			.display-inline-block; 
			list-style:none; 
			margin:0;
			padding:0;
		}
	}
	aside{
		.display-inline-block;
	}
}

.pagination_results{
    color:#fff;
    background-color:#006734;	
    a{
       padding: 3px; 
		margin:0;
		text-decoration:none;
		.transition(all, .5s, linear);
		color:#fff !important;
    
		&.active{
			background-color:#000;
		}
    	&:hover{
			background-color:#00411D;
			.transition(all, .5s, linear);
    	}
	}
 	li{
		color:#fff !important;
	}
    .bordr{
		border-right:1px solid #009644; 
		box-shadow: 1px 0px 0px #004D1E;
	}
    .bordl{
		border-left:1px solid #009644; 
		box-shadow: -1px 0px 0px #004D1E;
	}
}

    .search_results_total{
		.display-inline-block;
		padding-right:10px;
	}
    .results_per_page{
		.display-inline-block;
		width:auto;
		
		ul{
			margin-top:5px !important;
			li{
				padding:2px 4px;
			}
		}
	}
        .results_per_page li{
			padding-left:2px; 
			text-align:center;
		}
        .results_per_page li a.active{font-weight:bold;}

    .pagination_results_nav{
		.display-inline-block;
		float:right;
		text-align:right;
		width:auto;
	}
        .pagination_results_nav ul{.display-inline-block;}
        .pagination_results_nav a.previous, 
        .pagination_results_nav a.next{
			.iconFont;
			width:34px;
			height:34px;
			line-height:34px;
			text-align:center;
		}
        .pagination_results_nav a.previous:before{content: "\e022";}
        .pagination_results_nav a.next:before{content: "\e021";}


.view_bar{background:#cccccc;}
    .product_views{
		width:100px;
		margin-top: 8px !important;
		 li{
		 	a{
				.display-inline-block; 
				vertical-align:middle;
				opacity:.5;
				margin-left:5px;
				zoom:1;
				
				&:hover{
					.transition (all, 0.2s, ease-in);
					color:@base !important;
					opacity:1;
				}
				&.grid,&.list{
				  font-family: 'icomoon';
				  speak: none;
				  font-style: normal;
				  font-weight: normal;
				  font-variant: normal;
				  text-transform: none;
				  color:#666666;
				  text-decoration:none;
				  font-size:22px;
				}
				&.grid:after{
					content: "\f00a";
				}
				&.list:after{
					content: "\f00b";
            	}
				span{display:none;}
			}
		 }
		 li.active a{
				opacity:1;

		 }
	}

    .result_sort{
		text-align:right;
		line-height:36px;
		height:36px;
		select{
			width:60%;
			margin-top:2px;
		}
	}

    .category_pagination select {

    }

/*************************************************************************************************************
10. Parametric Filtration - Left Sidebar and components                                        
*************************************************************************************************************/

.result_filters{
	.categories_filter, .category_tree{
		.rounded(3px);
		margin-bottom:1em;
	}
}
.result_filters, .category_infobar, .hsPanel{
	.categories_filter,
	.category_tree,
	.frame{
		border: 1px solid #ccc;
		/*.rounded(3px);*/
		background:#fff;
		padding:0 10px;
		
		footer{
			text-align:right;
			font-size:11px;
			padding:5px 5px 10px;
			border-top:1px solid #ccc;
			a{}
		}
		select{width:100% !important;}
		
		header, footer{
			display:block;
			cursor:pointer;
			.transition (all, 0.5s, ease-in);
			color:@base;
			
			h3{
				.featurefont;
				font-size:16px;
				border-bottom:1px solid #ccc;
				padding-bottom:3px;
				margin:.5em 0;

				&:after{
					/*content: "\e00c";*/
					float:right;
					.iconFont;
					font-size:1.2em;
					margin-top:2px;
					color:#ccc;
					.transition (all, 0.5s, linear);
				}
				&:hover:after{
					color:@base;
					.transition (all, 0.5s, linear);
				}
			}
			&.min{ 
				h3{
					border:none;
					&:after{
						/*content: "\e00b";*/
					}
				}
			} 
		}
		p:last-child{margin-bottom:1em;}
	}
	
	aside.min{
        background:#eee;
    	
		h3{
            border:none;
		}
		header{
           .transition (all, 0.5s, ease-in);
			&:after{
		  		content: "\e01c";
			} 
		}
	}
    aside ul li{
		margin:0;
		font-size:.8em;
		.checked{
			 color:#1D7FDC !important;
		}
	}
	input[type="radio"], input[type="checkbox"]{
		margin-right:10px;
	}
}

.result_filters{
	margin-top:1em;
	ul{
		li{
			list-style:none;
		}
	}
	header{			
		h3{
			&:after{
				content: "\e00c";
			}
		}
		&.min{ 
			h3{
				&:after{
					content: "\e00b";
				}
			}
		} 
	}
	ul{
		li{
			margin:0;
			a{
				text-decoration:none;
			}
		}
	}
}
.category_infobar, .hsPanel{
	header, footer{			
			h3{
				span{
					float:right;
					&:after{
						content: "\e020";
						.iconFont;
						font-size:1.2em;
						color:#ccc;
						.transition (all, 0.5s, linear);
					}
				}
			}
			&.min{ 
				h3{
					span{
						&:after{
							content: "\e01f";
						}
					}
				}
			} 
		}
}

.price_filter{font-size:9px;}
.price_filter p.range_values{
    background:#f5f5f5;
    margin:0 -10px;
    padding:10px 0px !important;
    color:#1D7FDC !important;
}
    .price_filter p.range_values span{width:45%; margin-left:10px;}
        .price_filter p.range_values span input{width:35px; text-align:right;}

.ui-slider-handle.ui-state-hover{cursor:pointer !important;}

ul.checklist{
	margin: 0 0 1em;
	label{
		font-size:.9em;
		margin:0;
	}
	li{
		margin:0;
		a{
			text-decoration:none;
		}
	}
}

/*************************************************************************************************************
11. Misc Layout styles                                
*************************************************************************************************************/

/*  Group - Clearfix to ensure that a container holds the content of its children  */
.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}


/*************************************************************************************************************
12. Share bar                             
*************************************************************************************************************/

.sharethis a {
    text-decoration:none;
    font-size: 20px;       
}

/*************************************************************************************************************
12. Tabbed Area                         
*************************************************************************************************************/
#tabs{
	&.fixedHeight{
		.whiteBox{
			height:275px;
		}
	}
	.content.padding{
		padding:1em;
		.marginTB;
	}
	.whiteBox{padding:1em;}
	ul.tabHeader{
		margin:0;
		li{
			position:relative;
			.display-inline-block;
			padding:.5em 1em .3em;
			background:#eee;
			border:1px solid #ccc;
			margin:0 -5px 0 0;
			.roundcorners(10px, 10px, 0px, 0px);
			a{
				text-decoration:none;
				color:#ccc;
				font-size:1.3em;
				.featurefont;
				font-weight:bold;
			}
			&.active{
				background:#fff;
				border-bottom:1px solid #fff;
				z-index:1;
				a{
					color:@base
				}
			}
		}
	} 
	h3,h4{
		.featurefont;
		color:@base;
	}
	h3{
			margin:0 0 .5em;
			text-transform:uppercase;
			font-size:1.1em;
			
		}
	h4{
			margin:0 0 .5em;
			font-size:1em;
		}
	.review_entry{
		background:#f5f5f5;
		border:1px solid #ccc;
		margin:1em 0;
		padding:10px;
	}
}


/*************************************************************************************************************
13. Brand Bar                         
*************************************************************************************************************/

.brand-bar {
	margin-top: -40px;
	position: relative;

	select {
	  width: auto;
	  margin: 0;
	  height: 40px;
	}
	.btn{height:45px; line-height:35px; padding:5px 8px;}
}

.brand-row {
    margin:0px;
}
.brand-img {
    margin-bottom:0px;
}
.brand-row ul {
	.display-inline-block;
    list-style:none;
    margin:0px;
}
.brand-row li {
	.display-inline-block;
    list-style:none;
}
.more-btn {
  position: relative;
  font-size:3em;
  line-height:1em;
	 
	 a {
	  display: block;
	  text-decoration:none;
	  color:@base;
	 }
}

.sidebar-advert img {
 margin-bottom:20px;

}

/*************************************************************************************************************
14. Login Area                       
*************************************************************************************************************/
header h5 {
    font-family:'Roboto Condensed', sans-serif;
    font-size:18px;
    text-transform:uppercase;
    margin: 0.5em 0;
    color:#666666;
}

header form {
    margin:0px;
}
#form_id span6 {
    background:#eeeeee;
}

header p {
    color:#666666;
}

header button, header input[type="submit"] {
    background: rgb(246,246,246); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(246,246,246,1) 0%, rgba(235,235,235,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,246,246,1)), color-stop(100%,rgba(235,235,235,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(246,246,246,1) 0%,rgba(235,235,235,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(246,246,246,1) 0%,rgba(235,235,235,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(246,246,246,1) 0%,rgba(235,235,235,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(246,246,246,1) 0%,rgba(235,235,235,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#ebebeb',GradientType=0 ); /* IE6-9 */
    border: 1px solid #d4d3d3;
    color:#333333;
    text-transform:uppercase;
    font-family:Milford;
    font-weight:bold;
    font-size:14px;
    -webkit-box-shadow: 0px 1px 2px rgba(50, 50, 50, 0.59);
    -moz-box-shadow:    0px 1px 2px rgba(50, 50, 50, 0.59);
    box-shadow:         0px 1px 2px rgba(50, 50, 50, 0.59);
    padding:5px;
    border-radius: 3px;
}
header input[type="submit"] {
    width:70px;
}

header p {
    font-size:11px;
}

.loginPanel p {
    line-height: 20px;
    margin: 0px;
}

.loginPanel a {
color:#666666;
text-decoration:underline;
font-size:11px;

}

/*************************************************************************************************************
14. Complementry Product styles                       
*************************************************************************************************************/

.complementry-products{
	.marginTB;
	height:444px;
	text-align:center;
		h3{
			margin:0 0 .5em;
			text-transform:uppercase;
			color:@base;
			font-size:1em;
			.featurefont;
		}
}
.alsobought{
	h3{
			margin:0 0 .5em;
			text-transform:uppercase;
			color:@base;
			font-size:1em;
			.featurefont;
		}
}

/*************************************************************************************************************
15. Basket Table styles                       
*************************************************************************************************************/

table.basket{
	margin:.5em 0;
	h5{
		margin:0;
		padding:0;
		.featurefont;
		color:@base;
	}
	p{
		margin:0 0 .5 0;
		font-size:.7em;
	}
	td{
		&.remove_product{
			text-align:center; 
			cursor:pointer;
			color:#ccc;
			font-size:1.5em;
			.transition(all, 0.5s, ease-in);
			margin-bottom:.5em;
			
			&:hover{
				color:#fff;
				.transition(all, 0.5s, ease-in);
				background:#F00;
			}
        }
		&.prod_desc{
			max-width:450px;
		}
		&.prodIcons{
			vertical-align:middle;
			text-align:center;
		}
		&.prodQty{
			background:#f5f5f5;
			text-align:center;
			vertical-align:middle;
			width:60px;
		}
		&.prodPrice, &.priceTotal{
			text-align:right;
			padding:5px;
			vertical-align:bottom;
			color:@base;
			font-size:1em;
			font-weight:bold;
			width:120px;
		}
		&.rowHeading{vertical-align:middle; text-align:right;}
		&.deliveryTotal, &.voucherTotal{text-align:right;}
		&.basketTotalT{
			border-top:5px solid #ddd;
		}
		&.basketTotalB{
			border-bottom:5px solid #ddd;
		}
	}
}

/*************************************************************************************************************
15. Checkout Styles                       
*************************************************************************************************************/

textarea,
input[type="text"],
input[type="password"] { 
	display: block;	
	width:100%;
	border-radius:0;
	height:30px;
}
textarea{height: auto;}

a.green {
	/*color:@darkgreen; */
}

.guest_checkout_btn {
	margin: 3em 0;	
}

form {
	input{
		padding:5px 10px;
		text-indent:10px;
	}
}

/*************************************************************************************************************
16. Accordion Styles                       
*************************************************************************************************************/

.accordion{
	dt{
		border-bottom: 4px solid #eee;
		margin: .3em 0;
		padding: 0 0 .3em;
		a{
			text-decoration:none;
			.featurefont;			
		}
	}
	dd{
		padding:.5em;
		border: 1px solid #eee;
		margin:0 0 1em;
		p{
			input[type=checkbox]{
				float:left;
				margin-right:.5em;
				margin-bottom:1.5em;
			}
			&:first-child{margin-top:0;}
		}
		
		select{width:auto; margin:0;}
		.grayFrame{padding:.5em; text-align:left;}
	}
}


/*************************************************************************************************************
17. Button Styles                       
*************************************************************************************************************/
.btn{
	cursor:pointer;
	input[type=submit]{
		background:none;
		border:none;
		color:white;
		display:block;	
		text-indent:0;
		.featurefont;
	}
}

.view_mb.btn,
	.my_basket,
	.btn{
		.display-inline-block;
		width:auto;
		padding:5px 10px;
		.featurefont;
		.white;
		text-decoration:none;
		text-transform:uppercase;
		text-align: center;
		opacity:.9;
		.gradient (bottom, #999, #ccc);
		.transition(all, 0.2s, ease-in);
		
		&:hover{
			opacity:1;
			.transition(all, 0.2s, ease-in);
		}
	}
.darkGray{ 
	.gradient (bottom, #222, #444);
	.white;
}
.green{
	.gradGreen();
	a{.white !important; text-decoration:none;}
}
.orange{
	.gradient (bottom, @orange, @orange2);
	.white;
}

.button {border:0px;}

/*************************************************************************************************************
18. Slide Content Styles                       
*************************************************************************************************************/
.slide_content {
	display:none; font-size:.8em;
}

/*************************************************************************************************************
19. Search Styles                       
*************************************************************************************************************/
.search{
	position:relative;
	button{
		.iconFont;
		position:absolute;
		top:8px;
		right:8px;
		background:none;
		border: none;
		box-shadow:none;
	}
}

/*************************************************************************************************************
20. Order Summary Table Styles                       
*************************************************************************************************************/
.table.orderSummary{
	margin:0;
	h5{
		margin:0;
		padding:0;
		.featurefont;
		color:@base;
		line-height:1em;
	}
	p{
		margin:0 0 .5em 0;
		font-size:.8em;
	}
	td{
		vertical-align:bottom;
		font-size:.8em;
		
		&.prod_desc{
			max-width:450px;
		}
		
		&.prodIcons{
			vertical-align:middle;
			text-align:center;
		}
		
		&.prodQty{
			background:#f5f5f5;
			text-align:center;
			vertical-align:middle;
			width:40px;
		}
		
		&.prodPrice, &.priceTotal{
			text-align:right;
			padding:5px;
			vertical-align:bottom;
			color:@base;
			font-size:.8em;
			font-weight:bold;
		}
		
		&.rowHeading{vertical-align:middle; text-align:right;}
		&.deliveryTotal, &.voucherTotal{text-align:right;}
		&.basketTotalT{
			border-top:5px solid #ddd;
		}
		
		&.basketTotalB{
			border-bottom:5px solid #ddd;
		}
		
		&.grandTotalHeading,
       	&.grandProdQty,
       	&.grandPriceTotal{
			.gradient (bottom, #222, #444);
			.white; 
			text-align:right;  
			font-size:1em;
		}
	}
}

/*************************************************************************************************************
21. Reviews & Rating styles
*************************************************************************************************************/
#star{
	margin-right:0px;  
	text-align:right;
}

.rating{
	font-size:.8em;
	#hint{
		background:#fff;
		text-align:center;
		border:1px solid #ccc;
		min-height:25px;
		width:25px;
	}
}

.reviews_window{
	height:310px;
	overflow:auto;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}

.review_entry{
	border-top:1px solid #eee;
	border-bottom:1px solid #eee;
	padding:.5em 0;
	.reviewer{
		padding:.5em 0;
		text-align:center;
		font-size:12px;
		.review_rating{
			display:block;
			color:#DDDDDD;
			.gold{
				color:#ffac00;
			}
		}
		.review_author{
			display:block;
			margin:5px 0 0;
		}
		.review_date{
			display:block;
			font-size:11px;
			margin:0 0 5px;
		}
	}
	.review{
		padding:.5em;
		h4{margin:0; padding:0;}
		p{font-size:12px; margin-top:0;}
	}
	.verifiedUser{
		display:block;
		background:url(../images/icons/verified_user.svg) no-repeat center center;
		background-size:100%;
		width:60px;
		height:30px;
	}
}

/*************************************************************************************************************
22. Terms styles
*************************************************************************************************************/
.terms OL { counter-reset: item }
.terms LI { display: block }
.terms LI:before { content: counters(item, ".") " "; counter-increment: item }

.terms ol{
	margin:0;
	li{
		font-size:11px !important;
		font-weight:bold;
		ol{
			margin-bottom:1em;
			li{font-weight:normal;}
		}
	}
}

/*************************************************************************************************************
23. Tree styles
*************************************************************************************************************/
ul.tree, ul.navTree{
	margin:0 0 5px;
	padding:0;
	display:none;
	&.active{display:block;}
	>li{
		font-size:11px;
		&.min{font-weight:normal;}
		&.max{font-weight:bold;}
	}
	li{
		padding:0px 0px 0px 20px;
		&.more{
			padding-left:0;
			cursor:pointer;
			&:before {
				content: "\e00c";
				.iconFont;
				font-size:1em;
				color:#ccc;
				.transition (all, 0.5s, linear);
				padding-right:10px;
			}
			&.min:before{
				content: "\e00b";
			}
		}
		
		ul{
			display:none;
			margin-left:5px;
			margin-bottom:5px;

			li{
				font-size:10px;
				background: url(../images/tree/node.png) no-repeat;
				font-weight:normal;
				&:last-child {
				background: #fff url(../images/tree/lastnode.png) no-repeat;
				}
			}
		}
	}
}

/*************************************************************************************************************
24. Brand stamp styles
*************************************************************************************************************/

.BrandSum{
	position: relative; 
	top: -0.5em; 
	font-size: 80%; 
}
.brand {
	line-height:1em;
	.marginTB;
	position:relative;
	overflow:hidden;
	display:block;
	&.stamp{
		border:1px solid #ccc;
	}
	&.summary{
		width:220px;
		padding:10px; 
		background:#fff;
	}
	h1 {
		.featurefont;
		font-size:.9em;
		line-height:1;
		margin:0;
		padding:10px 10px 0;
		text-align:center;
	}
	a{ 
		color:#006633;
		text-decoration:none;
	}
}
.brand.summary{
	
	h1.brandName{
		.white;
		font-size:1em;
	}
	
	.stampOverlay{
		display:block;
		position:absolute;
		left:0;
		background:rgba(0, 0, 0, 0.8);
		padding:5px;
		bottom:-60px; 
		height:60px;
		line-height:60px;
		width:200px;
		margin-left:10px;
		filter: alpha(opacity=0);
		opacity: 0;
		.transition(all, 0.5s, ease-in);
		overflow:hidden;
		text-align:center;
	}
	
	&:hover .stampOverlay{
		bottom:10px;
		filter: alpha(opacity=1);
		opacity: 1;
		.transition(all, 0.5s, ease-in);
	}
}

/*************************************************************************************************************
25. Proceed button styles
*************************************************************************************************************/
.proceed{
	height:40px;
	.proceed_btn, .btn{
		height:40px;
		display:none;
		font-size:1.5em;
		padding:5px 10px;
		.featurefont;
		.white;
		text-decoration:none;
		text-transform:uppercase;
		text-align: center;
		opacity:.9;
		.gradient (bottom, #999, #ccc);
		
		&:hover{
			opacity:1;
			.transition(all, 0.2s, ease-in);
		}
		
		&.active{
			display:block;
		}
		&.darkGray{ 
			.gradient (bottom, #222, #444);
		}
		&.green{
			.gradGreen();
			a{.white() !important;}
		}
		&.orange{
			.gradient (bottom, @orange, @orange2);
		}
	}
	.proceed_btn{width:100%;}
}

/*************************************************************************************************************
26. category styles
*************************************************************************************************************/
.catNav.prodInfo_window{
	margin-bottom:.5em;
	overflow:hidden;
	.content{}
	&.minHeight{height:200px; .transition(all, 0.2s, ease-in);}
	&.maxHeight{height:100%; .transition(all, 0.2s, ease-in);}
}

.category_banner, .mainSlide{
	border:1px solid #CCCCCC;
	overflow:hidden;
	margin-bottom:5px;
}
.category_banner{
	img{
		width:100%;
		height:auto;
	}
}

h1.category_title{
	img{border:1px solid #ccc; vertical-align:text-bottom;}
}


.cat {
	line-height:1em;
	.marginTB;
	position:relative;
	overflow:hidden;
	display:block;
	&.stamp{
		border:1px solid #ccc;
		img{
			width:100%;
			height:auto;
		}
	}
	&.summary{
		background:#fff;
	}
	h3 {
		.featurefont;
		font-size:.9em;
		line-height:1;
		margin:0;
		padding:10px 10px 0;
		text-align:center;
	}
	a{ 
		color:#006633;
		text-decoration:none;
	}
}